<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <view class="status-bar-left">{{ currentTime }}</view>
      <view class="status-bar-right">
        <text class="iconfont icon-signal"></text>
        <text class="iconfont icon-wifi"></text>
        <text class="iconfont icon-battery-full"></text>
      </view>
    </view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-bar-title">文件</view>
      <view class="nav-bar-actions">
        <text class="iconfont icon-search" @click="handleSearch"></text>
        <text class="iconfont icon-plus" @click="handleAdd"></text>
      </view>
    </view>
    
    <!-- 应用内容区 -->
    <scroll-view class="app-content" scroll-y enable-flex refresher-enabled
      :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
      
      <!-- 分类标签 -->
      <scroll-view class="category-tabs" scroll-x show-scrollbar="false">
        <view 
          v-for="(tab, index) in categoryTabs" 
          :key="index" 
          class="category-tab" 
          :class="{ active: currentCategory === tab.type }" 
          @click="switchCategory(tab.type)"
        >
          <text class="iconfont" :class="tab.icon"></text>
          <text class="tab-text">{{ tab.name }}</text>
        </view>
      </scroll-view>
      
      <!-- 文件列表 -->
      <view class="file-list">
        <!-- 今天 -->
        <view class="date-separator">今天</view>
        
        <view class="list-item" v-for="(file, index) in todayFiles" :key="'today-'+index" @click="openFile(file)">
          <view class="list-item-icon" :style="{ backgroundColor: file.bgColor }">
            <image v-if="file.isImage" :src="file.thumbnail" mode="aspectFill" class="thumbnail-image" />
            <text v-else class="iconfont" :class="file.icon" :style="{ color: file.iconColor }"></text>
          </view>
          <view class="list-item-content">
            <view class="list-item-title">{{ file.name }}</view>
            <view class="list-item-subtitle">{{ file.size }} • {{ file.time }}</view>
          </view>
          <text class="iconfont icon-more-vertical" @click.stop="showFileOptions(file)"></text>
        </view>
        
        <!-- 昨天 -->
        <view class="date-separator">昨天</view>
        
        <view class="list-item" v-for="(file, index) in yesterdayFiles" :key="'yesterday-'+index" @click="openFile(file)">
          <view class="list-item-icon" :style="{ backgroundColor: file.bgColor }">
            <image v-if="file.isImage" :src="file.thumbnail" mode="aspectFill" class="thumbnail-image" />
            <text v-else class="iconfont" :class="file.icon" :style="{ color: file.iconColor }"></text>
          </view>
          <view class="list-item-content">
            <view class="list-item-title">{{ file.name }}</view>
            <view class="list-item-subtitle">{{ file.size }} • {{ file.time }}</view>
          </view>
          <text class="iconfont icon-more-vertical" @click.stop="showFileOptions(file)"></text>
        </view>
      </view>
      
      <!-- 底部占位区域，防止内容被TabBar遮挡 -->
      <view class="tab-bar-placeholder"></view>
    </scroll-view>
    
    <!-- 使用TabBar组件 -->
    <tab-bar :active-tab="'files'" @change="handleTabChange" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import TabBar from '@/components/TabBar.vue';
import { navigateToTab } from '@/utils/navigation';

// 下拉刷新状态
const isRefreshing = ref(false);

// 当前时间
const currentTime = ref('9:41');

// 当前选中的分类
const currentCategory = ref('all');

// 分类标签
const categoryTabs = ref([
  {
    type: 'all',
    name: '全部',
    icon: 'icon-grid'
  },
  {
    type: 'images',
    name: '图片',
    icon: 'icon-image'
  },
  {
    type: 'videos',
    name: '视频',
    icon: 'icon-video'
  },
  {
    type: 'documents',
    name: '文档',
    icon: 'icon-file-text'
  },
  {
    type: 'audio',
    name: '音频',
    icon: 'icon-music'
  }
]);

// 今天的文件
const todayFiles = ref([
  {
    id: 1,
    name: '家庭照片.jpg',
    size: '2.5 MB',
    time: '刚刚',
    type: 'image',
    isImage: true,
    thumbnail: '/static/images/photo_thumbnail.jpg',
    icon: 'icon-image',
    bgColor: '#E1F5FE',
    iconColor: '#03A9F4'
  },
  {
    id: 2,
    name: '工作报告.docx',
    size: '1.2 MB',
    time: '2小时前',
    type: 'document',
    isImage: false,
    icon: 'icon-file-word',
    bgColor: '#E8EAF6',
    iconColor: '#3F51B5'
  }
]);

// 昨天的文件
const yesterdayFiles = ref([
  {
    id: 3,
    name: '旅行视频.mp4',
    size: '256 MB',
    time: '昨天',
    type: 'video',
    isImage: false,
    thumbnail: '',
    icon: 'icon-video',
    bgColor: '#FFF3E0',
    iconColor: '#FF9800'
  },
  {
    id: 4,
    name: '语音备忘录.mp3',
    size: '3.5 MB',
    time: '昨天',
    type: 'audio',
    isImage: false,
    thumbnail: '',
    icon: 'icon-music',
    bgColor: '#E8F5E9',
    iconColor: '#4CAF50'
  }
]);

// 切换分类
const switchCategory = (type: string) => {
  currentCategory.value = type;
  console.log(`切换到${type}分类`);
};

// 更新时间的函数
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}`;
};

// 定时器
let timer: number;

// 页面加载时启动定时器
onMounted(() => {
  updateTime(); // 初始更新一次
  timer = setInterval(updateTime, 60000); // 每分钟更新一次
});

// 页面卸载时清除定时器
onUnmounted(() => {
  clearInterval(timer);
});

// 处理TabBar组件的切换事件
const handleTabChange = (tab: string) => {
  if (tab !== 'files') {
    // 使用导航工具跳转到对应页面
    navigateToTab(tab);
  }
};

// 处理搜索
const handleSearch = () => {
  uni.showToast({
    title: '搜索功能开发中',
    icon: 'none'
  });
};

// 处理添加
const handleAdd = () => {
  uni.showActionSheet({
    itemList: ['上传文件', '新建文件夹', '拍照', '录音'],
    success: (res) => {
      uni.showToast({
        title: `选择了: ${res.tapIndex}`,
        icon: 'none'
      });
    }
  });
};

// 打开文件
const openFile = (file: any) => {
  console.log('打开文件', file);
  
  switch (file.type) {
    case 'image':
      uni.previewImage({
        urls: [file.thumbnail || '/static/images/photo_thumbnail.jpg']
      });
      break;
    case 'video':
      uni.showToast({
        title: '打开视频播放器',
        icon: 'none'
      });
      break;
    case 'audio':
      uni.showToast({
        title: '打开音频播放器',
        icon: 'none'
      });
      break;
    default:
      uni.showToast({
        title: `打开文件: ${file.name}`,
        icon: 'none'
      });
  }
};

// 显示文件操作选项
const showFileOptions = (file: any) => {
  uni.showActionSheet({
    itemList: ['分享', '重命名', '移动到', '下载', '删除'],
    success: (res) => {
      console.log(`对文件 ${file.name} 执行操作: ${res.tapIndex}`);
    }
  });
};

// 下拉刷新处理
const onRefresh = () => {
  isRefreshing.value = true;
  
  // 模拟刷新数据
  setTimeout(() => {
    // 添加新文件到今天的列表
    const newFile = {
      id: Math.floor(Math.random() * 1000),
      name: `新文档_${new Date().getTime()}.pdf`,
      size: '1.8 MB',
      time: '刚刚',
      type: 'document',
      isImage: false,
      icon: 'icon-file-text',
      bgColor: '#E8EAF6',
      iconColor: '#3F51B5'
    };
    
    todayFiles.value = [newFile, ...todayFiles.value];
    
    // 结束刷新状态
    isRefreshing.value = false;
    
    uni.showToast({
      title: '刷新成功',
      icon: 'success'
    });
  }, 1500);
};
</script>

<style>
/* 全局样式变量 */
page {
  --primary-color: #2196F3;
  --secondary-color: #03A9F4;
  --accent-color: #FF9800;
  --text-color: #333;
  --light-gray: #f5f5f5;
  --medium-gray: #e0e0e0;
  --dark-gray: #9e9e9e;
  --danger-color: #f44336;
  --success-color: #4CAF50;
  background-color: #fff;
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

/* 顶部状态栏样式 */
.status-bar {
  height: 60rpx;
  width: 100%;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  font-size: 24rpx;
  /* 适配顶部安全区 */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

.status-bar-right {
  display: flex;
  align-items: center;
}

.status-bar-right text {
  margin-left: 8rpx;
  font-size: 24rpx;
}

/* 导航栏样式 */
.nav-bar {
  height: 80rpx;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24rpx;
  border-bottom: 1px solid var(--medium-gray);
}

.nav-bar-title {
  font-size: 32rpx;
  font-weight: 600;
}

.nav-bar-actions {
  display: flex;
  align-items: center;
}

.nav-bar-actions text {
  margin-left: 20rpx;
  font-size: 36rpx;
}

/* 应用内容区样式 */
.app-content {
  flex: 1;
  overflow-y: auto;
}

/* 分类标签 */
.category-tabs {
  display: flex;
  white-space: nowrap;
  padding: 20rpx 0;
  margin: 10rpx 0;
}

.category-tab {
  display: inline-flex;
  align-items: center;
  padding: 16rpx 30rpx;
  margin: 0 10rpx;
  border-radius: 40rpx;
  font-size: 24rpx;
  background-color: var(--light-gray);
  color: var(--text-color);
}

.category-tab:first-child {
  margin-left: 20rpx;
}

.category-tab:last-child {
  margin-right: 20rpx;
}

.category-tab.active {
  background-color: var(--primary-color);
  color: white;
}

.tab-text {
  margin-left: 8rpx;
}

/* 日期分隔符 */
.date-separator {
  padding: 20rpx 24rpx 16rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #666;
  background-color: #f9f9f9;
}

/* 文件列表 */
.list-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid var(--medium-gray);
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 16rpx;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.list-item-icon text {
  font-size: 32rpx;
}

.list-item-content {
  flex: 1;
}

.list-item-title {
  font-weight: 500;
  margin-bottom: 4rpx;
  font-size: 26rpx;
}

.list-item-subtitle {
  color: var(--dark-gray);
  font-size: 22rpx;
}

/* 底部占位区域 */
.tab-bar-placeholder {
  height: 100rpx;
  /* 适配底部安全区 */
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}
</style> 